<template>
	<view class="pinggu">
		<headertop title="快速咨询" str="orderlist" str1="oridei" back1="#fff"></headertop>
		<view class="" :style="{'margin-top':statusBarHeight+'px','width':'100%','height':barHeight+'px'}">
		</view>
		<view class="bottomcontent">
			<view class="center">
				<template v-for="item in  list" :key="item.id">
					<view class="userlt" v-if="item.type!='user'">
						<image :src="item['avatar']" class="avatar" mode="">
						</image>
						<view class="">
							<view style="font-family: PingFang SC, PingFang SC;font-weight: 500;font-size: 32rpx;
							color: #1D2129;text-align: left;width: 100%;margin-bottom: 20rpx;">{{item.nickname}}</view>
							<view class="bubble-container" v-if="item.content_type=='text'">
								<view>{{item['content']}}</view>
							</view>
							<image :src="item.content" mode="aspectFit"
								style="max-width: 200px; max-height: 200px; border-radius: 4px;"
								v-if="item.content_type=='image'" @click.stop="previewImage(0,[item.content])" />
						</view>
					</view>
					<view class="userltright" v-else>
						<view class="">
							<view style="font-family: PingFang SC, PingFang SC;font-weight: 500;font-size: 32rpx;
							color: #1D2129;text-align: right;width: 100%;margin-bottom: 20rpx;">{{item.nickname}}</view>
							<view class="bubble-container" v-if="item.content_type=='text'">
								<view>{{item['content']}}</view>
							</view>
							<image :src="item.content" mode="aspectFit"
								style="max-width: 200px; max-height: 200px; border-radius: 4px;"
								v-if="item.content_type=='image'" @click.stop="previewImage(0,[item.content])" />
						</view>
						<image :src="item['avatar']" class="avatar" mode="">
						</image>
					</view>
				</template>
				<view style="width: 100%;height: 1px;" class="count_big_box" id="count_big_box"></view>
			</view>
		</view>
		<view class="" style="height: 186rpx;">

		</view>
		<view class="fixed">
			<view class="shuruneirong">
				<input type="text" v-model="question" placeholder="请输入内容" />
				<!-- <textarea type="text" :adjust-position="false" v-model="question" placeholder="请输入内容" /> -->
				<view class="fasong" @click="send">
					发送
				</view>
			</view>
			<image src="/static/images/上传图片(1).png" class="addiocn" @click="uploadImage()" mode=""></image>
		</view>
	</view>
</template>

<script setup>
	import {
		baseUrl
	} from '@/ulm/config';
	import {
		setToken,
		getToken,
	} from '@/ulm/utils/auth';
	import {
		onPageScroll,
		onLoad,
		onShow,
		onReachBottom
	} from "@dcloudio/uni-app";
	import ulm, {
		$api
	} from '@/ulm';
	import {
		ref,
		reactive,
		onMounted,
		nextTick
	} from 'vue'
	import headertop from '@/components/header.vue'
	import {
		_static
	} from '@/ulm/utils/url.js'
	const statusBarHeight = ref('')
	const barHeight = ref('')
	const back1 = ref('')
	const images = ref([])
	const total = ref(0)
	const question = ref('')
	const list = ref([])
	const id1 = ref('')
	const formData = reactive({
		page: 1,
		list_rows: 10,
		id: ''
	})
	const flag = ref(false)
	onReachBottom(() => {
		if (total.value > list.value.length) {
			formData['page']++
			init(id1.value)
		}
	})
	onLoad((opt) => {
		id1.value = opt.id
		init(opt.id)
		console.log('滚动最底部-----------------');

	})

	function uploadImage() {
		uni.chooseImage({
			count: 6, // 最多可选择图片数量
			sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图
			sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机
			success: (res) => {
				const validImages = res.tempFiles.filter(file => {
					return file.size <= 2 * 1024 * 1024; // 2MB = 2 * 1024 * 1024 Bytes
				});
				if (validImages.length === 0) {
					uni.showToast({
						title: `${res.tempFiles.length - validImages.length}张图片超过2MB`,
						icon: 'none'
					});
					return;
				}
				console.log(res, 'res-------');
				// tempFilePath 可以作为 img 标签的 src 属性显示图片
				const tempFilePaths = res.tempFilePaths
				uploadImages(tempFilePaths)
			},
			fail: (err) => {
				console.log('选择图片失败', err)
			}
		})
	}

	function uploadImages(filePaths) {
		const uploadTasks = filePaths.map((filePath, index) => {
			console.log(filePath, 'filePath===========');
			return new Promise((resolve, reject) => {
				uni.uploadFile({
					url: `${baseUrl}/api/common/upload`,
					filePath: filePath,
					name: 'file',
					formData: {
						index: index // 可以添加序号标识
					},
					header: {
						token: getToken()
					},
					success: (uploadRes) => {
						resolve(JSON.parse(uploadRes.data))
					},
					fail: (err) => {
						reject(err)
					}
				})
			})
		})

		uni.showLoading({
			title: '上传中...'
		})

		Promise.all(uploadTasks)
			.then(results => {
				console.log(results[0], 'results[0]results[0]results[0]');
				for (var i in results) {
					images.value.push(results[i]['data']['fullurl'])
				}
				uni.hideLoading()
				console.log(images.value, 'images.valueimages.valueimages.valueimages.valueimages.value');
				sendimages()
			})
			.catch(err => {
				console.log('部分图片上传失败', err)
				uni.hideLoading()
			})
	}
	async function sendimages() {
		const res = await $api.adduser_message({
			image: images.value.join(),
			id: id1.value
		})
		if (res.code == 1) {
			images.value = []
			list.value = []
			formData.page = 1
			init(id1.value)
		}
	}

	function onFocus(e) {
		console.log(e, 'eeeeeeeee-----------------');
	}

	function previewImage(index, arr) {
		wx.previewImage({
			current: arr[index], // 当前显示图片的http链接
			urls: arr // 需要预览的图片http链接列表
		});
	}
	async function init(id) {
		formData.id = id
		const res = await $api.detailmessage(formData)
		if (res.code == 1) {
			list.value.push(...res.data.data)
			total.value = res.data.total
			nextTick(() => {
				uni.pageScrollTo({
					duration: 0,
					selector: '#count_big_box'
				});
			})

		}
	}
	onMounted(() => {
		statusBarHeight.value = uni.getSystemInfoSync().statusBarHeight
		const {
			top,
			height
		} = wx.getMenuButtonBoundingClientRect();
		barHeight.value = height ? height + (top - statusBarHeight.value) * 2 : 38;

	})
	async function send() {
		if (!question.value) {
			uni.showToast({
				title: '请输入内容',
				icon: 'none'
			})
		}
		const res = await $api.adduser_message({
			text: question.value,
			id: id1.value
		})
		if (res.code == 1) {
			question.value = ''
			list.value = []
			formData.page = 1
			init(id1.value)
		}
	}
	onPageScroll((e) => {

		if (e.scrollTop > 100) {
			back1.value = '#81D6FF'
		} else {
			back1.value = ''
		}

	})
</script>

<style lang="scss">
	page {
		background: #F7F8FA;
	}

	.pinggu {
		width: 100%;
		overflow: hidden;
		position: relative;

		.biyanguanliback {
			width: 100%;
			height: 626rpx;
			position: absolute;
			z-index: -1;
		}

		.fixed {
			width: 100%;
			height: 186rpx;
			background: #FFFFFF;
			box-shadow: 0rpx -6rpx 14rpx 0rpx rgba(0, 0, 0, 0.03);
			border-radius: 0rpx 0rpx 0rpx 0rpx;
			position: fixed;
			bottom: 0%;
			display: flex;
			justify-content: center;

			.addiocn {
				width: 60rpx;
				height: 60rpx;
				margin-top: 30rpx;
				margin-left: 30rpx;
			}

			.shuruneirong {
				width: 600rpx;
				// margin: auto;
				height: 80rpx;
				background: #F7F8FA;
				border-radius: 12rpx 12rpx 12rpx 12rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 22rpx;

				textarea {
					box-sizing: border-box;
					height: 50rpx;
					margin-left: 28rpx;
				}

				input {
					margin-left: 28rpx;
				}

				.fasong {
					width: 128rpx;
					height: 50rpx;
					line-height: 50rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					text-align: center;
					font-size: 32rpx;
					color: #2AB4F5;
					border-left: 2rpx solid #C9CDD4;
				}
			}
		}

		.bottomcontent {
			width: 100%;
			overflow: hidden;
			position: relative;
			display: flex;
			flex-direction: column;
			align-items: center;

			.cainixw {
				width: 686rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(124, 124, 124, 0.29);
				border-radius: 28rpx 28rpx 28rpx 28rpx;
				overflow: hidden;
				position: absolute;
				bottom: 250rpx;
				margin: auto;

				.cc {
					width: 630rpx;
					margin: auto;
					overflow: hidden;

					.topbox {
						width: 630rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;
						margin-top: 32rpx;
						margin-bottom: 22rpx;

						.tt {
							font-family: PingFang SC, PingFang SC;
							font-weight: 500;
							font-size: 32rpx;
							color: #1D2129;
						}

						.closebox {
							display: flex;
							align-items: center;
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							font-size: 28rpx;
							color: #2AB4F5;

							image {
								width: 36rpx;
								height: 36rpx;
								margin-right: 8rpx;
							}
						}
					}

					.wentixinxi {
						width: 630rpx;
						height: 76rpx;
						background: #EEF9FF;
						border-radius: 12rpx 12rpx 12rpx 12rpx;
						line-height: 76rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 28rpx;
						color: #1D2129;
						margin-bottom: 20rpx;
					}
				}
			}

			.center {
				width: 686rpx;
				margin: auto;
				margin-top: 50rpx;
				overflow: hidden;
				position: relative;


				.userltright {
					width: 100%;
					display: flex;
					margin-bottom: 50rpx;
					justify-content: flex-end;

					.avatar {
						width: 84rpx;
						height: 84rpx;
						border-radius: 50%;
						margin-left: 32rpx;
					}


					.bubble-container {
						position: relative;
						max-width: 530rpx;
						;
						/* 气泡框最大宽度 */
						background: #FFFFFF;
						/* 气泡框背景颜色 */
						color: #4E5969;
						/* 文字颜色 */
						border-radius: 12rpx 12rpx 12rpx 12rpx;
						/* 圆角边框 */
						padding: 22rpx;
						font-size: 28rpx;
						box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(124, 124, 124, 0.29);
						/* 内边距 */
						/* 外边距，可根据需要调整 */

						.triangle1 {
							position: absolute;
							width: 0;
							height: 0;
							border-top: 10px solid transparent;
							/* 左边透明 */
							border-bottom: 10px solid transparent;
							/* 右边透明 */
							border-left: 10px solid #2AB4F5;
							/* 底边为气泡框背景色 */
							right: -10px;
							/* 位于气泡框顶部 */
							top: 50%;
							/* 居中 */
							/* 居中 */
							transform: translateY(-50%);
							/* 水平居中 */
						}

					}
				}

				.userlt {
					width: 100%;
					display: flex;
					margin-bottom: 50rpx;

					.avatar {
						width: 84rpx;
						height: 84rpx;
						border-radius: 50%;
						margin-right: 32rpx;
					}


					.bubble-container {
						position: relative;
						max-width: 530rpx;
						;
						/* 气泡框最大宽度 */
						background: #FFFFFF;
						box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(124, 124, 124, 0.29);
						/* 气泡框背景颜色 */
						color: #4E5969;
						/* 文字颜色 */
						border-radius: 12rpx 12rpx 12rpx 12rpx;
						/* 圆角边框 */
						padding: 22rpx;
						font-size: 28rpx;
						/* 内边距 */
						/* 外边距，可根据需要调整 */

						.triangle1 {
							position: absolute;
							width: 0;
							height: 0;
							border-top: 10px solid transparent;
							/* 左边透明 */
							border-bottom: 10px solid transparent;
							/* 右边透明 */
							border-right: 10px solid #FFFFFF;
							/* 底边为气泡框背景色 */
							left: -10px;
							/* 位于气泡框顶部 */
							top: 50%;
							/* 居中 */
							transform: translateY(-50%);
							/* 水平居中 */
						}

					}


				}
			}
		}
	}
</style>